<template>
  <div class="combody">
    <div class="title">Contact Information</div>
    <div class="mt16">
      <div class="botitem flex-row justify-start align-center"
           v-for="(item,index) in botitems"
           @mouseenter="move(index)"
           @mouseleave="move(-1)"
           :key="index"
           :class="isindex==index?'active':''">
        <img :src="isindex==index?item.isimgurl:item.imgurl"
             alt="">
        <div class="botitem_font">
          <div class="botitem_title">{{item.title}}</div>
          <div class="botitem_content">{{item.content}}</div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isindex: -1,
      botitems: [
        {
          imgurl: require('@/static/images/right/email.png'),
          isimgurl: require('@/static/images/right/isemail.png'),
          title: 'email or mailbox',
          content: 'contact.service@outlook.com',
        },
        {
          imgurl: require('@/static/images/right/wx.png'),
          isimgurl: require('@/static/images/right/iswx.png'),
          title: 'WeChat',
          content: 'cwxid_abcdefg123',
        },
        {
          imgurl: require('@/static/images/right/app.png'),
          isimgurl: require('@/static/images/right/isapp.png'),
          title: 'WhatsApp',
          content: '+86 138 7654 3210',
        },

      ]
    }
  },
  methods: {
    move (index) {
      this.isindex = index

    }
  }
}
</script>

<style lang="scss" scoped>
.combody {
  margin-top: 40px;
  .title {
    font-weight: bold;
    font-size: 24px;
    color: #0041a3;
    line-height: 52px;
  }
  .botitem {
    margin-bottom: 8px;
    height: 72px;
    background: #eef6ff;
    padding-left: 17px;
    border-radius: 8px 8px 8px 8px;
    img {
      margin-right: 7px;
      width: 32px;
      height: 32px;
    }
    .botitem_font {
      padding-left: 8px;
      border-left: 1px solid #e5e8eb;
      .botitem_title {
        font-weight: 400;
        font-size: 14px;
        color: #616469;
        line-height: 14px;
        margin-bottom: 8px;
      }
      .botitem_content {
        font-family: Arial, Arial;
        font-weight: bold;
        font-size: 18px;
        color: #2e343e;
        line-height: 18px;
      }
    }
  }
  .active {
    background: #0078ff !important;
    color: #fff !important;
    // 所有子级设置颜色属性
    * {
      color: #fff !important;
    }
  }
}
</style>